<template>
  <el-form
    :rules="Rules"
    ref="target"
    :label-position="labelPosition"
    :model="form"
    size="large"
  >
    <MdEditor
      v-model="form.titleContent"
      @onSave="saveNow(form)"
      @onUploadImg="onUploadImg"
    />
    <el-form-item label="文章标题:" prop="titleName">
      <el-input v-model="form.titleName"></el-input>
    </el-form-item>
    <el-form-item label="文章类型:" prop="titleStudytype">
      <el-select v-model="form.titleStudytype" placeholder="请选择文章类型">
        <el-option
          v-for="item in option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      文章标签:
      <el-tag
        v-for="tag in tags"
        :key="tag"
        class="mx-1"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}</el-tag
      ><el-input
        v-if="inputVisible"
        ref="InputRef"
        v-model="inputValue"
        class="ml-1 w-20"
        size="small"
        @keyup.enter="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button
        v-else
        class="button-new-tag ml-1"
        size="small"
        @click="showInput"
      >
        + New Tag
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveNow(form)"> 发布 </el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts"  setup>
import { getCurrentInstance, reactive, ref, nextTick, onMounted } from "vue";
import Register from "../../../../views/Register.vue";
import store from "../../../../store";
import { ElMessage, ElInput, ElMessageBox } from "element-plus";
import { upload } from "../../../../api/pic";
import { addTitle, getTitleById } from "../../../../api/title";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const labelPosition = ref("right");
const tags = ref(["学习", "高难度", "内卷之王"]);
const inputValue = ref("");
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
const route = useRoute();
const Rules = {
  titleStudytype: [{ required: true, trigger: "blur", message: "请选择类型" }],
  titleName: [{ required: true, trigger: "blur", message: "请输入标题" }],
  titleContent: [{ required: true, trigger: "change", message: "请输入内容" }],
};
const option = [
  {
    value: "single",
    label: "单链表",
  },
  {
    value: "line",
    label: "线性表",
  },
];

const form = ref({
  titleId: "",
  titleStudytype: "",
  titleName: "",
  titleContent: "",
  titleTags: tags.value.join(";"),
});

const ifOtherPlace = onMounted(() => {
  const id = route.query.id as String;
  if (id != null) {
    getTitleById(id).then((res) => {
      form.value = res.data;

      tags.value = (res.data.titleTags as String).split(";");
      console.log("1" + tags.value);
      console.log();
    });
  }
});

const handleClose = (tag) => {
  tags.value.splice(tags.value.indexOf(tag), 1);
};
const handleInputConfirm = () => {
  if (inputValue.value) {
    tags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};
/**
 * 上传图片方法
 */
const onUploadImg = async (
  files: FileList,
  callback: (urls: string[]) => void
) => {
  console.log(files);
  const res = await Promise.all(
    Array.from(files).map((file) => {
      console.log(file);
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append("file", file);
        upload(form)
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item: any) => item.data.url));
};

//登录
function saveNow(essay: any) {
  this.proxy.$refs.target.validate((valid) => {
    if (!valid) return;
    ElMessageBox.confirm("确认要发布这篇文章吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "不要",
    })
      .then(() => {
        essay.titleTags = tags.value.join(";");
        addTitle(essay).then((res) => {
          console.log(res);
          ElMessage.success(res.msg);
        });
      })
      .catch((error) => {
        ElMessage.error(error);
      });
  });
}
</script>